<template>
    <div style="max-width: 960px;margin: 0 auto;">
        <Header></Header>
        <el-container>
            <el-header>
                <el-steps :active="active" finish-status="success"
                          style="margin-left: 70px;margin-top: 20px;width: 450px">
                    <el-step title="输入验证" icon="el-icon-mobile">
                        <div style="margin-left: 20px;margin-top: 20px;font-size: large;display: flex;align-items: center;">
                            <i class="el-icon-mobile"></i> 手机激活码
                        </div>
                    </el-step>
                    <el-step title="设置密码" icon="el-icon-edit"></el-step>
                </el-steps>
            </el-header>
            <el-main>
                <el-form style="border-radius: 4px" :model="authInfo" :rules="rules" ref="authInfo"
                         class="demo-authInfo">
                    <el-row>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                                <span style="margin-left: 70px">用户名：</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-light">
                                <el-form-item prop="username">
                                    <el-input type="text" placeholder="请输入用户名" v-model="authInfo.username"
                                              @blur.prevent="queryMobileByOrgId()"/>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="1">
                            <div class="grid-content bg-purple">
                                <span style="color:red">*</span>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                                <span style="margin-left: 70px">手机号：</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-light">
                                <el-form-item prop="mobile">
                                    <el-input type="text" :disabled="true" placeholder="请输入手机号"
                                              v-model="authInfo.mobile"/>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="11">
                            <div class="grid-content bg-purple">
                                <div>
                                    <button style="margin-right: 320px" type="button" v-show="show"
                                            v-on:click="getCode">发送验证码
                                    </button>
                                    <span style="margin-right: 270px" v-show="!show" class="count"><span
                                            style="color: red">{{count}}</span> 秒后可以重新发送</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                                <span style="margin-left: 70px">验证码：</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-light">
                                <el-form-item style="" prop="authCode">
                                    <el-input type="text" placeholder="请输入验证码" v-model="authInfo.authCode"
                                              style="align-items: right;display: inline-block"/>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="1">
                            <div class="grid-content bg-purple">
                                <span style="color:red">*</span>
                            </div>
                        </el-col>

                    </el-row>
                    <el-form-item>
                        <el-button style="padding: 12px 30px;margin-top: 12px;background-color: #409EFF;color: #FFFFFF"
                                   @click="next">下一步
                        </el-button>
                    </el-form-item>
                </el-form>

            </el-main>
        </el-container>
    </div>
</template>

<script>
    import Header from "../../../components/Header";
    import {setEmailCodeBefore, SMSValid} from "../../../api/userMG";

    export default {
        name: "get-password",
        components: {Header},
        data() {
            // 自定义title验证规则
            var validateTitle = (rule, value, callback) => {
                const reg = /[0-9a-zA-Z]{4,23}/;
                if (!reg.test(value)) {
                    callback(new Error('请填写4-23位正确格式'))
                } else {
                    callback()
                }
            };
            return {
                active: 0,
                show: true,
                count: '',
                timer: null,
                checked: false,
                authInfo: {
                    username: '',
                    mobile: '',
                    authCode: ''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {validator: validateTitle, trigger: 'blur'}
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {min: 11, max: 11, message: '手机号格式不正确', trigger: 'blur'}
                    ],
                    authCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {

            //下一步
            next() {
                const _this = this;
                SMSValid(_this.authInfo.authCode).then(res=>{
                    if(res.code === 200) {
                        console.log("active",this.active);
                        if (_this.active++ > 2) {this.active = 0}
                        console.log("active",this.active);
                        window.localStorage.username = _this.authInfo.username;// 放入username
                        _this.$router.push({name:"UpdatePass",params:{"active":this.active}})
                    }
                    else {
                        _this.$message.error("验证码错误！")
                    }
                });

            },
            //获取手机验证码
            getCode() {
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000);
                }

                console.log("======开始生成验证码=====");
                this.$axios.get("/api/v1/user/queryMobileByUsername?username="+this.authInfo.username).then(res=>{
                    if(res.data.code === 200) {
                        setEmailCodeBefore();// 生成验证码
                    }
                    else {
                        this.$message.error("手机号码错误！");
                    }
                });
            },
            queryMobileByOrgId() {
                console.log("======获取手机号=====");
                this.$axios.get("/api/v1/user/queryMobileByUsername?username="+this.authInfo.username).then(res=>{
                    if(res.data.code === 200) {
                        this.authInfo.mobile = res.data.data;
                    }
                    else {
                        this.authInfo.mobile = res.data.data;
                        this.$message.error(res.data.msg);
                    }
                });
            },

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const _this = this
                        this.$axios.post('/auth', this.authInfo).then(res => {

                            console.log(res.data)
                            const jwt = res.headers['authorization']
                            const userInfo = res.data.data

                            // 把数据共享出去
                            _this.$store.commit("SET_TOKEN", jwt)
                            _this.$store.commit("SET_USERINFO", userInfo)

                            // 获取
                            console.log(_this.$store.getters.getUser)

                            _this.$router.push("/blogs")
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },


    }
</script>

<style scoped>

    .el-main {
        background-color: #FFFFFF;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        margin-top: 20px;
    }

    .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
        margin-right: 250px;
        line-height: 5px;
    }

    .el-icon-mobile:before {
        font-size: 40px;
    }

</style>